<script setup lang='ts'>
import { getHeaderData, getParkingData } from "@/api/parkingManagement/index"
import parkingHook from "@/hook/parkingManagement/index"
let hook = parkingHook()
import { reactive } from "vue"
import router from "@/router/index"

let data = reactive({
    addWorkOrderDialog: false, //弹窗
    queryParams: {
        parkingType: ''
    },
    addForm: {
        code: '',
        associated: '',
        orderType: '',
        warehousingTime: '',
        duration: '',
        ownerName: '',
        phone: '',
        state: '',
        parkingType: ''
    }
})
// 获取头部信息
let headerData: any = reactive([])
function getHeaderNum() {
    getHeaderData().then(res => {
        console.log("res", res);
        headerData.push(...res.data)
        console.log("headerData", headerData);
    })
}
getHeaderNum()
// 获取工单数据
let tableData: any = reactive([
])  //表格数据
async function getTableData() {
    const data = await getParkingData()
    tableData.push(...data.data)
}
getTableData()

function handleSelectionChange() {

}
</script>
 
<template>
    <!-- 工单管理 -->
    <div class="header">
        <div class="numBox">
            <div class="item" v-for="(item, index) in headerData" :key="index">
                <div class="title">{{ item.title }}</div>
                <div class="num">{{ item.num }}</div>
            </div>
        </div>
    </div>
    <div class="table">
        <div class="top_item"><el-button type="warning" color="#e67e22" style="color: #fff;"
                @click="data.addWorkOrderDialog = true">添加车辆</el-button>
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item>
                    <el-select v-model="data.queryParams.urgency" placeholder="选择车位属性" clearable>
                        <el-option v-for="item in hook.urgencyOption" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <div class="tableBox">
            <el-table height="500" :data="tableData" @selection-change="handleSelectionChange" style="width: 100%">
                <el-table-column type="selection" align="center" width="55" />
                <el-table-column prop="code" align="center" label="车位编号" width="180" />
                <el-table-column prop="state" align="center" label="车位状态" width="180" />
                <el-table-column prop="associated" align="center" label="关联车辆" />
                <el-table-column prop="warehousingTime" align="center" label="入库时间" />
                <el-table-column prop="ownerName" align="center" label="业主姓名" />
                <el-table-column prop="phone" align="center" label="联系电话" />
                <el-table-column prop="parkingType" align="center" label="车位属性" />
                <el-table-column prop="duration" align="center" label="租赁期限">
                </el-table-column>
                <el-table-column fixed="right" align="center" label="操作" width="120">
                    <template #default>
                        <el-button link type="primary" size="small"
                            @click="router.push('/car/info')">查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background layout="->,prev, pager, next" :total="1000" />
        </div>

    </div>

    <!-- 添加工单对话框 -->
    <el-dialog v-model="data.addWorkOrderDialog" width="30%" class="dialog" title="添加工单">
        <el-form :inline="true" label-width="120px" class="demo-form-inline">
            <el-row>
                <el-col :span="24">

                </el-col>
                <el-col :span="24">
                    <el-form-item label="车辆类型">
                        <el-select style="width: 100%;" v-model="data.addForm.urgency" placeholder="选择车辆类型" clearable>
                            <el-option v-for="item in hook.urgencyOption" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="车牌号码">
                        <el-input style="width: 100%;" placeholder="输入车牌号码" v-model="data.addForm.reportPerson" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="车主姓名">
                        <el-input style="width: 100%;" placeholder="输入车主姓名" v-model="data.addForm.reportPersonPhone"
                            clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="车辆联系方式">
                        <el-input style="width: 100%;" placeholder="输入车辆联系方式" v-model="data.addForm.address" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="车位编号">
                        <el-input style="width: 100%;" placeholder="输入车位编号" v-model="data.addForm.problemDescription"
                            clearable />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="data.addWorkOrderDialog = false">Cancel</el-button>
                <el-button class="submit" style="float: right;" type="primary" @click="onSubmit"
                    color="#e67e22">Query</el-button>
            </span>
        </template>
    </el-dialog>
</template>
 
<style scoped lang="scss">
$fontColor: #555555;

.numStyle {
    color: #000;
    font-weight: 700;
}

// 头部数据展示
.header {
    .numBox {
        padding: 20px;
        height: 100px;
        background-color: #fff;
        border-radius: 10px;
        display: flex;
        justify-content: space-between;
        text-align: center;

        .item {
            line-height: 50px;
            width: 23%;

            .title {
                color: $fontColor;
            }

            .num {
                @extend .numStyle;
                font-size: 30px;
            }

            & {
                &:last-child {
                    border: none !important;
                }
            }


        }
    }
}

.table {
    padding: 20px;
    background-color: #fff;
    margin-top: 15px;
    border-radius: 10px;

    .top_item {
        display: flex;
        justify-content: space-between;
    }
}

.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}


.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.tableBox {
    background-color: #fff;
}

.el-pagination {
    margin-top: 30px;
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.submit {
    color: #fff;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>
